<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>教师信息</title>
    <script src="../lib/jquery-3.4.1.js"></script>
    <script src="../lib/constant.js"></script>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <style>

        .layui-form{
            position: absolute;
            left: 10%;
        }
        .a1{
            opacity: 1;
            animation: a1 1s;
            color: black;
        }
        .a2{
            opacity: 1;
            animation: a2 1.5s;
            color: black;
        }
        .a3{
            opacity: 1;
            animation: a3 2s;
            color: black;
        }
        .a4{
            opacity: 1;
            animation: a4 2.5s;
            color: black;
        }
        .a5{
            opacity: 1;
            animation: a5 3s;
            color: black;
        }
        .a6{
            opacity: 1;
            animation: a6 3.5s;
            color: black;
        }
        @keyframes a1 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0;
                background-color: #00F7DE;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes a2 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0;
                background-color: #8fc31f;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes a3 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0;
                background-color: #9947eb;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes a4 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0;
                background-color: #4E5465;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes a5 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0;
                background-color: #40AFFE;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes a6 {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 0;
                background-color: #eb47c2;
                width: 800px;
            }
            100% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend style="margin-left: 10%">教师信息</legend>
    </fieldset>
    <form class="layui-form" action="">
        <div class="layui-form-item a1">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="username" id="user-name-label" readonly="readonly" autocomplete="off"  class="layui-input" style="width:160px;">
            </div>
        </div>
        <div class="layui-form-item a2">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="password" autocomplete="off"  class="layui-input" style="width:160px;">
            </div>
        </div>
        <div class="layui-form-item a3">
            <label class="layui-form-label">手机号码</label>
            <div class="layui-input-block">
                <input type="text" name="phone" id="phone" autocomplete="off"  class="layui-input" style="width:160px;">
            </div>
        </div>
        <div class="layui-form-item a4">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input type="email" name="email" id="email" autocomplete="off" class="layui-input" style="width:160px;">
            </div>
        </div>
        <div class="layui-form-item a5">
            <label class="layui-form-label">学校</label>
            <div class="layui-input-block">
                <input type="text" name="school" id="school" readonly="readonly" autocomplete="off" class="layui-input" style="width:160px;">
            </div>
        </div>
        <div class="layui-form-item a6">
            <div class="layui-input-block">
                <button type="button" id="submit" class="layui-btn">修改</button>
            </div>
        </div>
    </form>
</body>
<script>
    var tele;
    $(function () {
        $.ajax({
            type: 'get',
            url: RequestURL + '/teacher/teacherInfo',
            success: function (data) {
                $("#user-name-label").val(data.username);
                $("#password").val(data.password);
                $("#phone").val(data.phone);
                $("#email").val(data.email);
                $("#school").val(data.school);
                // tele=data.tele;
            }
        });

        //点击提交将tele，name，address三个字段封装发送到cotroller
        $("#submit").click(function () {
            let username = $("#user-name-label").val().trim();
            let password = $("#password").val().trim();
            let phone = $("#phone").val().trim();
            let email = $("#email").val().trim();
            let school = $("#school").val().trim();
            if (username == '' || username == null) {
                alert("用户名不能为空");
                return false;
            }else if (password == '' || password == null){
                alert("密码不能为空");
                return false;
            }else if (school == '' || school == null){
                alert("学校不能为空");
                return false;
            }
            $.ajax({
                type: 'post',
                url: RequestURL + '/teacher/chTeacherInfo',
                data: {
                    "username": username,
                    "password": password,
                    "phone": phone,
                    "email": email,
                    "school": school,
                },
                success: function (data) {
                    alert("修改成功");
                    $.ajax({
                        type:'get',
                        url: "/teacher/logout",
                        headers: {
                            "Authorization":getCookie("token"),
                        },
                        success: function(data) {
                            parent.location.href="../main.html";
                        }
                    });
                }
            });
        });
    });


</script>
</html>